<template>
  <div class="gift">
      <ul>
        <li v-for="item in list[0].presentList">
          <div>
            <p>{{item.name}}(剩余:{{item.id}}%)</p>
            <p>礼包内容:{{item.description}}</p>
            <p>有效时间：{{item.time}}</p> 
          </div>
          <span>领取</span>
        </li>
      </ul>
  </div> 
</template>

<script>
export default {
  name: 'type',
  data () {
    return {
      list:[
        {"presentList":[{"id":"56","name":"8月激活码","leftover":"92","description":"蓝色材料包*2，精力球*5，雀魂*500，元宝*100","time":"2016-08-12 至 2016-09-12","status":0},{"id":"65","name":"8月下旬激活码","leftover":"95","description":"精力球*5，寻龙令*20，雀魂*500，元宝*100","time":"2016-08-22 至 2017-08-22","status":0},{"id":"71","name":"申请礼包","leftover":"50","description":"100钻石 + 初级灭麒麟牙 + 初级宝雕弓 + 初级方天画戟 + 初级青釭剑 + 初级羽扇。","time":"2016-08-30 至 2017-08-30","status":0},{"id":"73","name":"9月开学季礼包","leftover":"97","description":"元宝*100.银两兑换券*2，精力球*5，觉醒石*200","time":"2016-09-08 至 2016-10-08","status":0},{"id":"79","name":"中秋节礼包","leftover":"99","description":"元宝*128，银两*8888万，军资宝箱*8，寻龙令*28","time":"2016-09-20 至 2016-10-20","status":0}]}
      ]
      
    }
  }  
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.gift,ul{
  width: 100%;
  background: #fff;
}
li{
  display: flex;
  width: 100%;
  align-items: center;
  font-size: 13px;
  color: #999;
  border-top: 2px solid #ddd;
}
li div{
  width: 2.6rem;
  padding: 0.06rem;
}
li span{
  display:block;
  background-color:#ff2741;
  color: #fff;
  font-size: 12px;
  padding: 0.03rem;
}
</style>
